{extend name="common/index" /}

{block name="css"}
<link type="text/css" rel="stylesheet" href="../../static/common/jedate-6.5.0/skin/jedate.css">
<script type="text/javascript" src="../../static/common/jedate-6.5.0/src/jedate.js"></script>
<style>
    /*修改bootstrap表格边框颜色*/
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #bbb !important;
        text-align: center;
        font-size: 16px;
    }

    tr {
        height: 40px;
    }

    td {
        border: 1px solid #ccc;
        text-align: center;
    }
</style>
{/block}

{block name="content-wrapper"}
<section class="content-header">
    <h1>
        <a href="#">区域门店趋势</a>
        <small>Regional store trend</small>
    </h1>
    <div style="margin-top: 10px;">
    </div>
</section>
<section class="content container-fluid">
    <div class="row" style="padding:15px;height:600px;">
        <div class="abc" id="stores_show1" style="width:100%;height:100%;"></div>
    </div>
    <div class="row" style="padding:15px;overflow-y:auto;">
        <div style="display:flex;">
            <div style="flex:100px 0 0;text-align:center;line-height:40px;">
                <div>月份（2015）</div>
                <div>门店数</div>
            </div>
            <table style="flex:1;">
                <tr>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    {volist name='oneDate' id='val'}
                    <td class="col-md-1">{$val}</td>
                    {/volist}
                </tr>
                <tr>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    {volist name='oneStores' id='val'}
                    <td class="col-md-1" style="color:#3C8DBC;font-weight:700;">{$val}</td>
                    {/volist}
                </tr>
            </table>
        </div>

        <br>
        <div style="display:flex;">
            <div style="flex:100px 0 0;text-align:center;line-height:40px;">
                <div>月份（2016）</div>
                <div>门店数</div>
            </div>
            <table style="width:100%;">
                <tr>
                    {volist name='twoDate' id='val'}
                    <td class="col-md-1">{$val}</td>
                    {/volist}
                </tr>
                <tr>
                    {volist name='twoStores' id='val'}
                    <td class="col-md-1" style="color:#3C8DBC;font-weight:700;">{$val}</td>
                    {/volist}
                </tr>
            </table>
        </div>

        <br>
        <div style="display:flex;">
            <div style="flex:100px 0 0;text-align:center;line-height:40px;">
                <div>月份（2017）</div>
                <div>门店数</div>
            </div>
            <table style="width:100%;">
                <tr>
                    {volist name='threeDate' id='val'}
                    <td class="col-md-1">{$val}</td>
                    {/volist}
                </tr>
                <tr>
                    {volist name='threeStores' id='val'}
                    <td class="col-md-1" style="color:#3C8DBC;font-weight:700;">{$val}</td>
                    {/volist}
                </tr>
            </table>
        </div>

        <br>
        <div style="display:flex;">
            <div style="flex:100px 0 0;text-align:center;line-height:40px;">
                <div>月份（2018）</div>
                <div>门店数</div>
            </div>
            <table style="width:100%;">
                <tr>
                    {volist name='fourDate' id='val'}
                    <td class="col-md-1">{$val}</td>
                    {/volist}
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <!--<td class="col-md-1"></td>-->
                    <!--<td class="col-md-1"></td>-->
                </tr>
                <tr>
                    {volist name='fourStores' id='val'}
                    <td class="col-md-1" style="color:#3C8DBC;font-weight:700;">{$val}</td>
                    {/volist}
                    <td class="col-md-1"></td>
                    <td class="col-md-1"></td>
                    <!--<td class="col-md-1"></td>-->
                    <!--<td class="col-md-1"></td>-->
                </tr>
            </table>
        </div>

    </div>
</section>
{/block}

{block name="introduce-js"}
<script>
    var url_1 = "{:url('index/index/date_stores')}";//去获取支付渠道使用率
</script>
<script src="../../static/index/js/echarts.min.js"></script>
<script src="../../static/index/js/ecStat.min.js"></script>
<script src="../../static/index/js/stores_show1.js"></script>
{/block}
